import React, { PureComponent } from 'react';

import { isEqual } from 'lodash';
import { Form } from '@ant-design/compatible';

import {
  Col,
  Row,
  Radio,
  Cascader,
} from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
import '@ant-design/compatible/assets/index.css';

const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1430304_y2xsdrlvrh.js',
});

interface JoinAreaDateType {
  is_exclusive: number;
  parea_code: string;
  carea_code: string;
  darea_code: string;
}

interface JoinAreaProps {
  addressList: any;
  loading?: boolean;
  value?: JoinAreaDateType[];
  onChange?: (value: JoinAreaDateType[]) => void;
}

interface JoinAreaState {
  loading?: boolean;
  data?: JoinAreaDateType[];
}

class JoinArea extends PureComponent<JoinAreaProps, JoinAreaState> {
  constructor(props: JoinAreaProps) {
    super(props);
    this.state = {
      data: props.value || [],
    };
  }

  static getDerivedStateFromProps(nextProps: JoinAreaProps, preState: JoinAreaState) {
    if (isEqual(nextProps.value, preState.data)) return null;

    return {
      data: nextProps.value,
    };
  }

  /**
   * 添加区域
   */
  handleAdd = () => {
    const { data = [] } = this.state;
    const newData = data.map(item => ({ ...item }));
    newData.push({
      is_exclusive: 1,
      parea_code: '00111',
      carea_code: '0011101',
      darea_code: '001110101',
    });
    this.setState({ data: newData });

    const { onChange } = this.props;
    if (onChange) {
      onChange(newData);
    }
  };

  /**
   * 删除区域
   */
  handleDelArea = (index: number) => {
    const { data = [] } = this.state;
    const newData = data.map(item => ({ ...item }));
    newData.splice(index, 1);
    this.setState({ data: newData });

    const { onChange } = this.props;
    if (onChange) {
      onChange(newData);
    }
  };

  /**
   * 选择是否独家
   */
  handleExclusive = (index: any, e?: any) => {
    const { data = [] } = this.state;
    const newData = data.map(item => ({ ...item }));
    newData[index].is_exclusive = e.target.value;
    this.setState({ data: newData });

    const { onChange } = this.props;
    if (onChange) {
      onChange(newData);
    }
  };

  /**
   * 选择区域
   */
  handleArea: any = (index: number, value: [string, string, string]) => {
    const { data = [] } = this.state;
    const newData = data.map(item => ({ ...item })) || [];
    [
      newData[index].parea_code,
      newData[index].carea_code,
      newData[index].darea_code,
    ] = value;
    this.setState({ data: newData });

    const { onChange } = this.props;
    if (onChange) {
      onChange(newData);
    }
  };

  render() {
    const { data = [] } = this.state;
    const { addressList } = this.props;
    const rowElems: any[] = [];
    let clos: any[] = [];

    data.forEach((region, index) => {
      const regionIndex = index;
      clos.push(
        <Col
          md={10}
          sm={24}
          key={`region_${regionIndex}`}
          style={{ marginBottom: 20 }}
        >
          <div className="dottedBox" style={{ display: 'flex' }}>
            <div style={{ marginRight: 8, width: 56 }}>
              <div className="operLink" onClick={this.handleAdd}>
                <MyIcon type="iconjiahao" style={{ margin: '4px 4px 0 0' }} />
                增加
              </div>
              {data.length > 1 && (
                <div
                  className="operLink"
                  style={{ marginTop: 24, color: '#ff4d4f' }}
                  onClick={() => this.handleDelArea(index)}
                >
                  <MyIcon type="iconjianhao" style={{ margin: '4px 4px 0 0' }} />
                  删除
                </div>
              )}
            </div>
            <div
              className="operLink"
              style={{ width: '90%' }}
            >
              <Form.Item
                label="是否独家"
                colon={false}
                className="marginB-4Import"
                style={{ marginTop: -4 }}
              >
                <Radio.Group
                  value={region.is_exclusive}
                  onChange={this.handleExclusive.bind(this, index)}
                >
                  <Radio value={0}>非独家</Radio>
                  <Radio value={1}>独家</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item
                label="加盟区域"
                colon={false}
                className="marginB-4Import"
                style={{ marginTop: 4 }}
              >
                <Cascader
                  options={addressList}
                  placeholder="请选择"
                  style={{ width: '70%' }}
                  value={[
                    region.parea_code,
                    region.carea_code,
                    region.darea_code,
                  ]}
                  onChange={this.handleArea.bind(this, index)}
                />
              </Form.Item>
            </div>
          </div>
        </Col>,
      );
      if (clos.length === 2 || index === data.length - 1) {
        rowElems.push(
          <Row
            gutter={{ md: 8, xl: 48, lg: 48 }}
            key={`row${rowElems.length + 1}`}
          >
            {clos}
          </Row>,
        );
        clos = [];
      }
    });

    return (
      <Form layout="vertical" hideRequiredMark>
        {rowElems}
      </Form>
    );
  }
}

export default JoinArea;
